<template>
	<w-dailog
		v-model="dialogVisible"
		width="800px"
		:title="title"
		:showMoreBtn="false"
	>
  <div class="organ-manage-container">
		<w-table
			ref="listTable"
			:tableColumn="tableColumn"
			:listData="tableData"
			:showColumnFilterBtn="false"
			:showPagination="false"
			:selectable="false"
			:showToolsLeft="false"
		>
		</w-table>
	</div>
  <template slot="footer">
			<el-button @click="onCancelClick">取消</el-button>
		</template>
	</w-dailog>
</template>
<script>
export default {
	name: 'bomContainer',
	data () {
		return {
			tableColumn: [
				{ prop: 'materialFatherName', label: '产品', required: true },
				{ prop: 'materialCode', label: '原料编码', required: true },
				{ prop: 'materialName', label: '原料名称', required: true },
				{
					prop: 'busUnit',
					label: '单位',
					required: true
				},
				{
					prop: 'useTotal',
					label: '理论用量',
					required: true
				},
				{	prop: 'aTotal', label: '实际用量', required: true },
				{
					prop: 'diffTotal', label: '差异用量', required: true
				}
			],
			tableData: [],
			dialogVisible: false,
			title: ''
		}
	},
	methods: {
		open (routeID, materialName) {
			this.dialogVisible = true
			this.title = materialName + 'BOM详情'
			this.getBomList(routeID)
		},
		getBomList (routingId) {
			return this.$fxApi('schedule.findDetailBomByRoutingId')({
				query: {
					routingId: routingId
				}
			}).then(res => {
				this.tableData = res
				return Promise.resolve(res)
			})
		},
		onCancelClick () {
			this.dialogVisible = false
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.organ-manage-container {
	flex: 1;
	display:flex
	flex-direction: column
	overflow: auto
	.tools-left, .tools-right {
		display:flex
		flex-direction: row
		align-items: center
	}
	.tools-left {
		flex: 1
	}
}
</style>
